import React, { useState, useEffect } from 'react';
import { Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';
import PropTypes from 'prop-types';
import { bind } from '@/api/userInfo/index'
import { useSelector } from 'react-redux';


const MyUpload = ({ ...props }) => {
  const { value } = props;
  const [fileList, setFileList] = useState(value || []);
  const userInfo = useSelector(state => state.userInfo.userInfo)


  useEffect(() => {
    setFileList(value || []);
  }, [value]);

  const handleChange = async (info) => {
    let newFileList = [...info.fileList];
    if (info.file.status === 'done') {
      message.success('上传成功!');
      console.log(info.file)
      await bind(userInfo.account, info.file.response.onlyId, info.file.response.url)
    }
    setFileList(newFileList)
  };

  return (
    <Upload
      action="http://127.0.0.1:3007/user/uploadAvatar"
      listType="picture-card"
      fileList={fileList}
      onChange={handleChange}
    >
      {fileList.length >= 1 ? null : <InboxOutlined />}
    </Upload>
  );
};

MyUpload.propTypes = {
  value: PropTypes.array,
  onChange: PropTypes.func
};

export default MyUpload;
